<template>
  <div>
    <div class="list-btn">
      用户姓名:<Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      手机号:<Input v-model.trim="params.phone" placeholder="请输入手机号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      订单号:<Input v-model.trim="params.nid" placeholder="请输入订单号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
    </div>
    <div class="list-btn">
      结清状态:
      <Select clearable style="width:200px" v-model="params.settleStatus" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option :value=0>未结清</Option>
        <Option :value=1>已结清</Option>
      </Select>
    </div>
    <div class="list-btn">
      催收状态:
      <Select clearable style="width:200px" v-model="params.allotStatus" placeholder="全部">
        <Option value=" ">全部</Option>
        <Option :value=0>催收中</Option>
        <Option :value=1>催收已回收</Option>
      </Select>
    </div>
    <div class="list-btn">
      时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px" ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px"  ></DatePicker>
    </div>

    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>


    <Modal
      v-model="showModal.isShow"
      title="查看催收记录"
      :footer-hide="true"
      :loading="loading">
      <Form style="">
        <Table height="400" :columns="CollectionLogTitle" border :data="CollectionLog"></Table>
      </Form>
      <div style="text-align: right;margin-top: 20px">
        <Button @click="showModal.isShow = false;">关闭</Button>
        <!--<Button type="primary" @click.prevent="UpdateData">确定</Button>-->
      </div>
    </Modal>
    <Modal
      v-model="showModal.editShow"
      title="新增催收记录"
      :footer-hide="true"
      :closable="true"
      :style="{textAlign:'left'}">
      <Form  :label-width="80" ref="formRole" :rules="ruleValidate" :model="formRole">
        <FormItem label="备注" prop="remark" >
          <Input v-model="formRole.remark" type="textarea"  :maxlength=200 :autosize="{ minRows: 4, maxRows: 8 }" placeholder="请输入" style="width:360px"></Input>
        </FormItem>
        <div style="text-align: right;margin-top: 20px">
          <Button @click="showModal.editShow = false;resetValidate('formRole')" style="margin-right:5px">取消</Button>
          <Button type="primary" @click="ok">确定</Button>
        </div>
      </Form>
    </Modal>

  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    methods:{
      ok(){
         this.$refs['formRole'].validate((valid) => {

          if (valid) {
            this.$post('/bkcollectionlog/append',{
              collectionUserId:this.collectionUserId,
              remark:this.formRole.remark,
              collectionId:this.collectionId
           })
            .then((res) => {
              if(res.code === 0){
                this.showModal.editShow = false;
                this.resetValidate('formRole')
                this.$Message.success('提交成功！');
              }
            }, (err) => {
              console.log(err);
            })
            }
         })
      },
      getCollectionLog(id){
        this.$post('/bkcollectionlog/list',{
          collectionId:id
        })
          .then((res) => {
            if(res.code === 0){
              this.CollectionLog = res.data;
            }
          }, (err) => {
            console.log(err);
          })
      }
    },
    data () {
      return {
        tag: {
          'title': '我的催收',
          'path': '/work/urgeMine/list'
        },
        formRole:{},
        collectionId:'',
        collectionUserId:'',
        CollectionLog:[],
        showModal:{
          isShow:false,
          editShow:false,
        },
        ruleValidate: {
          remark: [
            { required: true, message: '请填写备注', trigger: 'blur' }
          ],
        },
        statusList:[
          {
            id: 0,
            name:'未分配'
          },
          {
            id: 1,
            name: '已分配'
          }
        ],
        CollectionLogTitle:[
          {
            title: '时间',
            align:'center',
            width:150,
            key:'createTime',
            render: (h, params) => {
              return h('div',this.getLocalTime(params.row.createTime))
            }
          },
          {
            title: '备注',
            align:'left',
            key:'remark',
          }
        ],
        listTitle: [
          {
            title: '订单号',
            minWidth: 200,
            key: 'nid',
            align:'left',
          },
          {
            title: '用户姓名',
            key: 'realname',
            minWidth:100,
            align:'center'
          },
          {
            title: '手机号',
            key: 'phone',
            minWidth:120,
            align:'center'
          },
          {
            title: '借款周期(天)',
            key: 'loanDay',
            minWidth:110,
            align:'center'
          },
          {
            title: '借款金额(元)',
            key: 'loanMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.loanMoney))
            }
          },
          {
            title: '应还金额(元)',
            key: 'needRepayment',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.needRepayment))
            }
          },
          {
            title: '应还本金(元)',
            key: 'realMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.realMoney))
            }
          },
          {
            title: '逾期费用(元)',
            key: 'overdueAmount',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.overdueAmount))
            }
          },
          {
            title: '逾期天数',
            key: 'days',
            minWidth:110,
            align:'center'
          },
          {
            title: '已还金额(元)',
            key: 'repaymentMoney',
            minWidth:110,
            align:'center',
            render: (h, params) => {
              return h('div', this.toYuan(params.row.repaymentMoney))
            }
          },
          {
            title: '合同开始时间',
            key: 'borrowTime',
            minWidth:160,
            align:'center',
            render: (h, params) => {
              return h('div',this.getLocalTime(params.row.borrowTime))
            }
          },
          {
            title: '合同结束时间',
            key: 'repayTime',
            minWidth:160,
            align:'center',
            render: (h, params) => {
              return h('div',this.getLocalTime(params.row.repayTime))
            }
          },
          {
            title: '结清状态',
            key: 'settleStatus',
            minWidth:110,
            align:'center',
            render: (h, params) => {// 审核状态 0审核中，1通过，2拒绝 ，3电核
              let d = {};
              switch (params.row.settleStatus){
                case 0:
                  d.txt = '未结清';
                  d.color = '#f90';
                  break;
                case 1:
                  d.txt = '已结清';
                  d.color = '#19be6b';
                  break;

              }
              return h('div', {
                props: {},
                style:{
                  color:d.color
                }
              }, d.txt)
            },
          },
          {
            title: '催收状态',
            key: 'allotStatus',
            minWidth:140,
            align:'center',
            render: (h, params) => {// 审核状态 0审核中，1通过，2拒绝 ，3电核
              let d = {};
              switch (params.row.allotStatus){
                case 0:
                  d.txt = `${params.row.collectionUserName}:催收中`;
                  d.color = '#19be6b';
                  break;
                case 1:
                  d.txt = '催收回收';
                  d.color = '#f90';
                  break;

              }
              return h('div', {
                props: {},
                style:{
                  color:d.color
                }
              }, d.txt)
            },
          },
          {
            title: '操作',
            key: 'action',
            align:'center',
            width: 200,
            render: (h, params) => {
              if(params.row.allotStatus != 1){
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.showModal.isShow = true;
                        this.getCollectionLog(params.row.id);
                      }
                    }
                  }, '查看催记'),

                  h('Button', {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.showModal.editShow = true;
                        this.resetValidate('formRole');
                        this.formRole={};
                        this.collectionUserId = params.row.collectionUserId;
                        this.collectionId = params.row.id;
                      }
                    }
                  }, '新增催记'),

                ]);
              }else{
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'info',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.showModal.isShow = true;
                        this.getCollectionLog(params.row.id);
                      }
                    }
                  }, '查看催记'),
                ]);

              }

            }
          },
        ],
        url: '/bkcollection/person/list',
        nameListUrl: '',
        params: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10
        },

      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
